<template>
  <view class="pb-30">
    <view class="list-container bg-f mg-30 px-20">
      <view class="list-item list-border-top-e flex--center py-20">
        <view class="label">原始密码</view>
        <view class="flex-1">
          <uv-input border="none" placeholder="请输入原始密码" placeholderStyle="#bcbcbc" fontSize="28rpx" v-model="formData.oldPassword"></uv-input>
        </view>
      </view>
      <view class="list-item list-border-top-e flex--center py-20">
        <view class="label">新密码</view>
        <view class="flex-1">
          <uv-input border="none" placeholder="请输入新密码" placeholderStyle="#bcbcbc" fontSize="28rpx" v-model="formData.newPassword"></uv-input>
        </view>
      </view>
      <view class="list-item list-border-top-e flex--center py-20">
        <view class="label">确认密码</view>
        <view class="flex-1">
          <uv-input border="none" placeholder="请再次输入新密码" placeholderStyle="#bcbcbc" fontSize="28rpx" v-model="reNewPwd"></uv-input>
        </view>
      </view>
    </view>

    <view class="button-wrap mx-30">
      <button class="button-item uv-reset-button bg-primary color-f radius-10 flex-center-center fw-700" @click="handleSubmit">确认</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        oldPassword: '', // 旧密码
        newPassword: '', // 新密码
      },
      reNewPwd: '',
    }
  },
  methods: {
    async handleSubmit() {
      if (!this.formData.oldPassword.trim()) return uni.showToast({ title: '请输入原始密码', icon: 'none' })
      if (!this.formData.newPassword.trim()) return uni.showToast({ title: '请输入新密码', icon: 'none' })
      if (!this.reNewPwd.trim()) return uni.showToast({ title: '请再次输入新密码', icon: 'none' })
      if (this.formData.newPassword !== this.reNewPwd) return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })

      uni.showLoading({ mask: true })
	  this.formData.rawPassword = this.reNewPwd
      const result = await this.$api.putUpdatePwd(this.formData)
	  if(result){
		  uni.showLoading({ title: '修改成功' })
		  setTimeout(() => {
		    uni.navigateBack()
		  },1500)
	  }
      
      
    },
  },
}
</script>

<style lang="scss" scoped>
.label {
  width: 4em;
  white-space: nowrap;
  margin-right: 35rpx;
}
.button-wrap {
  margin-top: 53rpx;
}
.button-item {
  height: 80rpx;
}
</style>
